<template>
    <Menu mode="horizontal" theme="light" :style="{borderRadius: '5px'}">
        <div :style="{float:'left',width:'200px'}">
            <img class="layout-logo" src='@/assets/logo.png' />
        </div>
        
        <Menu mode="horizontal" @on-select="handleMenuClick" :active-name="ActiveModel" :style="{float:'left',maxWidth: 960,overflow: 'auto'}">
            <MenuItem :name="item.name" v-for="item in Menu.filter(item => item.checked || item.indeterminate)" :key="item.id" >
                <Icon :type="item.icon" />
                {{ item.title }}
            </MenuItem>
        </Menu>
        
        <Menu mode="horizontal" @on-select="handleMenuClick" active-name="1"  :style="{ width: '420px',float: 'right'}">
            <MenuItem name="10" :style="{ marginTop: '6px',height: '55px'}" disabled>
                <span :style="{top: '-6px',height:'100%',position:'relative'}">
                    <strong :style="{fontSize: '20px'}">{{CurrentUser.Name}}</strong> 
                    <span style="margin-left:20px">你好，欢迎您</span>
                </span>
            </MenuItem>
            <MenuItem name="11" :style="{ marginTop: '6px',height: '55px',width: '80px',textAlign: 'center' }">
                <Badge>
                    <Icon type="ios-notifications-outline" size="25"></Icon>
                </Badge>
            </MenuItem>
            <Submenu name="12" :style="{ marginTop: '6px',height: '55px',width: '115px',textAlign: 'center' }">
                <template slot="title">
                    <Badge>
                        <Icon type="md-person" size="25" :style="{marginBottom: '10px'}"></Icon>
                    </Badge>
                </template>
                <MenuItem name="3-1" >
                    <Icon type="md-person" size="15"></Icon>
                    用户信息
                </MenuItem>
                <MenuItem name="3-2" @click.native.prevent="handlePassword">
                    <Icon type="ios-key" size="15"></Icon>
                    修改密码
                </MenuItem>
                <MenuItem name="3-3" @click.native.prevent="handleLogout">
                    <Icon type="md-close-circle" size="15"></Icon>
                    退出系统
                </MenuItem>
            </Submenu>
            <!-- <MenuItem name="exit" :style="{  marginTop: '6px',height: '55px' }">
                <span :style="{top: '-6px',height:'100%',position:'relative'}">
                    系统退出
                </span>
            </MenuItem> -->
        </Menu>
        <Modal
            v-model="ShowpwdModal"
            title="密码修改"
            ok-text="提交"
            cancel-text="取消"
            @on-ok="ok"
            @on-cancel="cancel">
            <Form :model="Alterpwd" :label-width="80">
                <Row>
                    <Col offset="2" span="19">
                        <FormItem label="原密码">
                            <Input v-model="Alterpwd.oringnal" placeholder="原密码"></Input>
                        </FormItem>
                        <FormItem label="修改密码">
                            <Input v-model="Alterpwd.newpassword" placeholder="修改密码"></Input>
                        </FormItem>
                        <FormItem label="确认密码">
                            <Input v-model="Alterpwd.confirmpassword" placeholder="确认密码"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </Modal>
    </Menu>
</template>
<script>
    import { removeToken,getUserInfo } from '@/store/localStorage/cookies';
    import { SetCurrentModel,GetCurrentModel,SetCurrentOpenMenu } from '@/axios/api/MenuManagerAPI'
    import { mapState } from "vuex";

    export default {
        name: 'navbar',
        created: function(){
            this.$store.dispatch('navbar/InitNavBar',{ Menu: [],ActiveMenu: ''})
        },
        mounted: function(){
            this.CurrentUser = JSON.parse(getUserInfo());
            GetCurrentModel({currentUser: this.CurrentUser.Id}).then(res => {
                this.ActiveModel = res.ActiveModel;
                this.$store.dispatch('sidebar/ChangeSideBar',res);
            });
        },
        computed:{
            ...mapState('navbar',[
                'Menu'
            ])
        },
        data() {
            return {
                ShowpwdModal: false,
                Alterpwd:{
                    oringnal:'',
                    newpassword:'',
                    confirmpassword:''
                },
                ActiveModel: '1',
                CurrentUser: {},
            }
        },
        methods: {
            handlePassword(){
                this.ShowpwdModal=true;
            },
            handleLogout(){
                removeToken();
                this.$router.push({ path: '/#/login'})
            },
            handleMenuClick(name){
                var MenuData = {};
                switch(name){
                    case "Operation" :
                        var Operation = this.Menu.filter(item => (item.checked || item.indeterminate) && item.name == "Operation")[0].children
                        if(Operation){
                            MenuData = { Menu: Operation,OpenNames: ['Certfied'],ActiveModel: name};
                            SetCurrentModel({ currentUser: this.CurrentUser.Id,Model: MenuData });
                        }
                        break;
                    case "Finanical" :
                        var Finanical = this.Menu.filter(item => (item.checked || item.indeterminate) && item.name == "Finanical")[0].children
                        if(Finanical){
                            MenuData = { Menu: Finanical,OpenNames: ['FundsAccount'],ActiveModel: name}
                            this.$store.dispatch('sidebar/ChangeSideBar',MenuData)
                            SetCurrentModel({ currentUser: this.CurrentUser.Id,Model: MenuData });
                        }
                        break;
                    case "HR" :
                        var HR = this.Menu.filter(item => (item.checked || item.indeterminate) && item.name == "HR")[0].children
                        if(HR){
                            MenuData = { Menu: HR,OpenNames: ['Orgnization'],ActiveModel: name}
                            this.$store.dispatch('sidebar/ChangeSideBar', MenuData);
                            SetCurrentModel({ currentUser: this.CurrentUser.Id,Model: MenuData});
                        }
                        break;
                    case "Source" :
                        var Source = this.Menu.filter(item => (item.checked || item.indeterminate) && item.name == "Source")[0].children
                        if(Source){
                            MenuData = { Menu: Source,OpenNames: ['Supply'],ActiveModel: name}
                            this.$store.dispatch('sidebar/ChangeSideBar',MenuData)
                            SetCurrentModel({ currentUser: this.CurrentUser.Id,Model: MenuData });
                        }
                        break;
                    case "CostManage" :
                        var CostManage = this.Menu.filter(item => (item.checked || item.indeterminate) && item.name == "CostManage")[0].children
                        if(CostManage){
                            MenuData = { Menu: CostManage,OpenNames: ['Cost'],ActiveModel: name}
                            this.$store.dispatch('sidebar/ChangeSideBar',MenuData)
                            SetCurrentModel({ currentUser: this.CurrentUser.Id,Model: MenuData});
                        }
                        break;
                    case "Project" :
                        var Project = this.Menu.filter(item => (item.checked || item.indeterminate) && item.name == "Project")[0].children
                        if(Project){
                            MenuData = { Menu: Project,OpenNames: ['Process'],ActiveModel: name}
                            this.$store.dispatch('sidebar/ChangeSideBar',MenuData)
                            SetCurrentModel({ currentUser: this.CurrentUser.Id,Model: MenuData });
                        }
                        break;
                    case "Law" :
                        var Law = this.Menu.filter(item => (item.checked || item.indeterminate) && item.name == "Law")[0].children
                        if(Law){
                            MenuData = { Menu: Law,OpenNames: ['CaseManage'],ActiveModel: name}
                            this.$store.dispatch('sidebar/ChangeSideBar',MenuData)
                            SetCurrentModel({ currentUser: this.CurrentUser.Id,Model: MenuData });
                        }
                        break;
                    case "SystemConfig":
                        var SystemConfig = this.Menu.filter(item => (item.checked || item.indeterminate) && item.name == "SystemConfig")[0].children
                        if(SystemConfig){
                            MenuData = { Menu: SystemConfig,OpenNames: ['SystemConfig'],ActiveModel: name}
                            this.$store.dispatch('sidebar/ChangeSideBar',MenuData)
                            SetCurrentModel({ currentUser: this.CurrentUser.Id,Model: MenuData });
                        }
                        break;
                    default:
                        var payload = { Menu: [],OpenNames: [] };
                        this.$store.dispatch('sidebar/ChangeSideBar',{ Menu: payload,OpenNames: ['']})
                        break;
                }
                this.$store.dispatch('sidebar/ChangeSideBar',MenuData)
                SetCurrentOpenMenu({ currentUser: this.CurrentUser.Id,OpenMenu: JSON.stringify(MenuData.OpenNames)});
            },
            ok () {
                this.$Message.info('Clicked ok');
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            }
        }
    }
</script>

<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-logo{
        width: 150px;
        background-image: '@/assets/logo.png';
        border-radius: 3px;
        float: left;
        position: relative;
        top: 20px;
        left: 20px;
    }
    .layout-nav{
        width: 80%;
        height: 100%;
        margin: 0 auto;
        margin-right: 20px;
    }
</style>